<template>
  <div class="box border-bottom">
     <div class="boxLeft">
      <h1>华清宫景区成人票（当天可订10.8-12.31）</h1>
       <ul>
         <li>
           <span>
             <img src="https://img1.qunarzz.com/piao/fusion/1703/ac/1c9b308337e3f902.png">
           </span>
           2018-10-12
         </li>
         <li>
           <span>
             <img src="https://img1.qunarzz.com/piao/fusion/1703/bd/868afac58cdab802.png">
           </span>
           随时可退
         </li>
       </ul>
     </div>
     <div class="boxRight">
        <p><span>￥120</span>起</p>
        <h3>预定须知</h3>
     </div>
  </div>

</template>

<script>
  export default {
    name: 'ShopIntro'

  }
</script>

<style  scoped>
  .box {
      width:100%;
      height: 75px;
  }
  .boxLeft {
      float: left;
      width: 70%;
      margin: 5px 0;
      border-right: 1px solid #cccccc;
      box-sizing: border-box;
  }
  .boxLeft h1 {
    margin-left: 5px;
  }
  .boxLeft ul {
      list-style: none;
       margin-top: 10px;
  }
  .boxLeft ul li{
      float: left;
      margin-right: 10px;
      margin-left: 5px;
  }
  .boxLeft ul li img {
      width: 12px;
      height: 12px;
  }
  .boxRight {
      float: right;
      width: 30%;
      text-align: center;
      margin: 5px 0;
  }
  .boxRight p {
    margin: 10px 0 ;

  }
   .boxRight p span {
    color: red;
    font-size: 20px;
    font-weight: bold;
  }
  .boxRight h3 {
    color: darkblue;
  }

</style>





